<template>
	<view>
		<u-popup :show="showPop" mode="center" @close="popClose">
			<view>
				<ScanProgressInfo />
			</view>
		</u-popup>

		<Setting ref="setting" :showFileds="showFileds" @on-sure="onSettingSure" />
		
		<div id="top">
			<u-navbar title="开始采集" :autoBack="true" :safeAreaInsetTop="false" :fixed="false">
				<view slot="right" @tap="navBarClick">
					<u-icon name="setting" size="19"></u-icon>
				</view>
			</u-navbar>

			<!-- snScanInfo：{{snScanInfo}} -->
			<cx-scan-input @on-confirm="onScanConfirm" />
			<!-- 			<cx-scan-progress class="p-l-20 p-r-20 p-b-20" :current="piecesCountProgress.current"
				:total="piecesCountProgress.total" :unitName="piecesCountProgress.unitName" />
			<cx-scan-progress class="p-l-20 p-r-20 p-b-20" :current="quantityProgress.current"
				:total="quantityProgress.total" :unitName="quantityProgress.unitName" :lineFontSize="28" />
 -->
			<cx-scan-info :quantity.sync="snScanInfo.quantity" :priceQuantity.sync="snScanInfo.priceQuantity"
				:canDeliverUseQuantity="snScanInfo.canDeliverUseQuantity" @on-change="onQuantityChange" />
		</div>
		<scroll-view scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
			@refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
			:style="{height: `${screenHeight}px`}">

			<!-- 列表 -->
			<view class="p-l-30 p-r-30">
				<view class="item" v-for="(item, index) in listData" :key="index">
					<view class="delete-btn">
						<u-button type="error" shape="circle" size="small" @tap="btnDelete(item)">删除</u-button>
					</view>
					<view class="name">{{item.name}} {{item.code}}</view>
					<view class="flex-sb">
						<view class="bill-no">{{item.billNo}}</view>
					</view>
					<view class="c-99 m-t-20">
						<view>颜色：{{item.color}} / {{item.colorNumber}}</view>
						<view class="flex">
							<view class="flex-1">幅宽：{{item.widthValue}}</view>
							<view class="flex-1">克重：{{item.widthValue}}</view>
						</view>
						<view v-if="showFileds.includes('spec')">规格：{{item.spec}}</view>
						<view v-if="showFileds.includes('vatNo')">缸号：{{item.vatNo}}</view>
						<view v-if="showFileds.includes('itemNo')">款号：{{item.itemNo}}</view>
						<view>仓库：{{item.storeName}}</view>
						<view v-if="showFileds.includes('remarks')">备注：{{item.remarks}}</view>
					</view>
					<view class="flex-sb m-t-20 p-t-20 b-t" @tap="scanClick">
						<view>
							已采集：{{item.piecesCountProgress.current}}{{item.piecesCountProgress.unitName}}
							/ {{item.quantityProgress.current}}{{item.quantityProgress.unitName}}
						</view>
						<view>
							共需：{{item.piecesCountProgress.total}}{{item.piecesCountProgress.unitName}}
							/ {{item.quantityProgress.total}}{{item.quantityProgress.unitName}}
						</view>
					</view>
					<!-- <cx-scan-progress class="m-t-20" :lineFontSize="34" :lineHeiht="14" /> -->
				</view>
			</view>
		</scroll-view>
		<u-modal :show="modalShow" @confirm="onDeleteConfirm" @cancel="modalShow = false" ref="uModal" showCancelButton
			:asyncClose="true" title="确定要删除该记录吗？">
		</u-modal>
		<u-loading-page :loading="pageLoading"></u-loading-page>
	</view>
</template>

<script>
	import {
		addData,
		updateScanQuantity,
		deleteById
	} from '@/apis/bill/scan-sn.js'

	import url001 from '@/static/video/001.mp3'
	import url002 from '@/static/video/002.mp3'
	import url003 from '@/static/video/003.mp3'
	import url004 from '@/static/video/004.mp3'
	import url005 from '@/static/video/005.mp3'
	import urlsuccess from '@/static/video/success.mp3'

	// console.log("aa", aa)

	const URL_MAP = {
		"001": url001,
		"002": url002,
		"003": url003,
		"004": url004,
		"005": url005,
		"success": urlsuccess,
	}

	import ScanProgressInfo from './components/scan-progress-info'
	import Setting from './components/setting.vue'

	export default {
		components: {
			ScanProgressInfo,
			Setting
		},
		data() {
			return {
				// 单据进度
				piecesCountProgress: {},
				quantityProgress: {},
				// 条码信息
				snScanInfo: {},

				billId: null,
				player: null,
				modalShow: false,
				screenHeight: 1000,
				pageLoading: false,
				showPop: false,
				triggered: false,
				// 列表页面显示的字段
				showFileds: [],
				currentRow: null,
				// 单据明细条码信息
				snScanDetailInfo: {},
				listData: []
			}
		},
		onLoad() {
			this.billId = this.$Route.query.billId
			this.initData(this.billId)
		},
		onReady() {
			const sysInfo = uni.getSystemInfoSync()
			console.log("sysInfo", sysInfo)
			uni.createSelectorQuery().in(this).select('#top').boundingClientRect(data => {
				this.screenHeight = sysInfo.windowHeight - data.height
			}).exec();
			// 缓存
			this.showFileds = this.$ls.get("showFileds") || []
		},
		methods: {
			btnDelete(row) {
				this.modalShow = true
				this.currentRow = row
			},
			onQuantityChange(quantity) {
				const snScanDetailInfo = this.snScanDetailInfo || {}
				const scanId = snScanDetailInfo.scanId
				const params = {
					scanId,
					quantity
				}
				console.log("onQuantityChange params", params)
				if (!scanId) return
				uni.showLoading({
					title: "修改中"
				})
				updateScanQuantity(params).then(res => {
					if (!res.data.flag) return
					uni.showToast({
						icon: "success",
						title: res.data.title
					})
				}).finally(_ => {
					uni.hideLoading()
				})
			},
			onDeleteConfirm() {
				const currentRow = this.currentRow
				const scanId = currentRow.scanId
				deleteById(scanId).then(res => {
					if (!res.data.flag) return
					const data = res.data.data
					// 条码信息清空
					this.snScanInfo = {}
					// 列表清空
					this.listData = []
					uni.showToast({
						title: res.data.message
					})

				}).finally(_ => {
					this.modalShow = false
				})
			},
			navBarClick() {
				this.$refs.setting.open()
			},
			initData(billId) {},
			scanClick() {
				console.log("showPop")
				this.showPop = true
			},
			popClose() {
				this.showPop = false
				// console.log('close');
			},
			onScanConfirm(sn) {
				const billId = this.billId
				if (!billId) return console.error("请传入billId")
				if (!sn || sn === '') return
				const params = [{
					sn,
					billId,
					billType: 'saleReserve'
				}]
				uni.showLoading({
					title: "采集中"
				})
				addData(params).then(res => {
					if (!res.data.flag) {
						const errorCode = res.data.data
						const url = URL_MAP[errorCode]
						new Audio(url).play()
						return
					}
					const data = res.data.data || {}
					// this.piecesCountProgress = data.piecesCountProgress || {}
					// this.quantityProgress = data.quantityProgress || {}
					this.snScanInfo = data.snScanInfo || {}
					this.snScanDetailInfo = data.snScanDetailInfo
					this.listData = [data.snScanDetailInfo || {}]
					console.log("snScanInfo", this.snScanInfo)

					if (data.isComplete) {
						new Audio(url005).play()
						return
					}
					new Audio(urlsuccess).play()
				}).finally(_ => {
					uni.hideLoading()
				})
			},
			onSettingSure(data) {
				this.showFileds = data
				this.$ls.set("showFileds", data)
			},
			onRefresherrefresh() {
				console.log("onRefresherrefresh")
				this.listData = []
				this.listPage()
			},
			onScrolltolower() {}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		border-radius: 10rpx;
		background: #fff;
		padding: 30rpx;
		margin-top: 30rpx;
		position: relative;

		.delete-btn {
			right: 20rpx;
			position: absolute;
		}

		.name {
			font-size: 40rpx;
		}
	}

	.bottom {
		position: fixed;
		width: 100%;
		box-shadow: 6px 6px 6px 10px rgba(0, 0, 0, .06);
	}
</style>